<template>
	<div>
		<div class="logo-box">
	 		<img class="logo-img" src="../assets/logo.gif" />
			<div class="logo-text">
				<p class="logo-text-b">BT-TECHNOLOGY</p>
				<p class="logo-text-bt logo-text-b">比特科技</p>
			</div>
		</div>
		<el-menu class="el-menu-demo" background-color="white" text-color="black" mode="horizontal">
		  <el-menu-item v-on:mouseenter="navbgin($(event))" v-on:mouseleave="navbgout($event)" index="1" ref='menu1'>
			<router-link to="/main">首页</router-link>
		  </el-menu-item>

		   <el-menu-item index="2" ><router-link to="/cstudy">C++研发</router-link></el-menu-item>
		   <el-menu-item index="3"><router-link to="/test">测试开发</router-link></el-menu-item>
		   <el-menu-item index="4" ><router-link to="/javastudy">JAVA</router-link></el-menu-item>
		   <el-menu-item index="5"><router-link to="/teacher">导师阵容</router-link></el-menu-item>
		   <el-menu-item index="6"><router-link to="/goodlesson">精品项目</router-link></el-menu-item>
		   <el-menu-item index="7"><router-link to="/stujob">学院就业</router-link></el-menu-item>
		    <el-submenu index="8">
			      <template slot="title">百宝箱</template>
			      <el-menu-item index="8-1"><router-link to="/skillbk">技术博客</router-link></el-menu-item>
			      <el-menu-item index="8-2"><router-link to="/interview">精彩面经</router-link></el-menu-item>
			      <el-menu-item index="8-3"><router-link to="/book">书籍推荐</router-link></el-menu-item>
			       <el-menu-item index="8-4"><router-link to="/software">常用软件</router-link></el-menu-item>
			        <el-menu-item index="8-5"><router-link to="/btreabox">常见问题</router-link></el-menu-item>
			</el-submenu>
		</el-menu>
	   <div class="nav-login">
		   <img class="tele-icon" src="../assets/tele.png" /><span class="nav-diviline"></span>
			<button class="stu-login">学员登录</button>
	   </div>

  </div>
</template>

<script>
	import Vue from 'vue';
	import {Menu,MenuItem} from 'element-ui'
    Vue.use(Menu);
    Vue.use(MenuItem);
export default {
  	name:'NavMain',
  	mounted(){
  		this.tableData()
    },
    data(){
    	return {
    		msg:'测试'
    	}
    },
		components:{
			Menu,
			MenuItem
		},
    methods:{
    	tableData(){
    		let self = this;
    		this.msg = '';

    	},
    	navbgin(event){
    		event.target.classList.add("active")
    	},
    	navbgout(event){

    	}
    }
}
</script>
<style>
.router-link-active{
	background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
	background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
	color: white!important;
}
	/* .router-link-exact-active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white!important;
		min-width: 40px;
	}
	.is-active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white!important;
	} */
 a{
		text-decoration: none;
		display: inline-block;
		height: 90px;
		width: 100%;
		text-align: center;
	}
	.el-menu--horizontal > .el-submenu .el-submenu__title{
		height: 90px;
		line-height: 90px;
		width: 84px!important;
	}
	.el-menu-item{
		padding: 0!important;
	}
	body{
		margin: 0;
		padding: 0;
	}
	.logo-box{
		width: 225px;
		text-align: right;
		top: 0;
		left: 100px;
		height: 80px;
		position: relative;
	}
	.logo-box div{
		position: absolute;
	    bottom: 5px;
		right: 0;
		text-align: left;
	}
	.logo-box p{
		margin: 0;
		padding: 0;

		font-size: 14px;
	}
	.logo-text-b{
		color: #919191!important;

	}
	.logo-box .logo-text-bt1{
		font-weight: bold;
	}
	.logo-img{
		width:100px;
		height: 100px;

		position: absolute;
		left: 0;
	}
	.el-menu-demo{
	  position: absolute;
	  height: 90px;
	  top: 0px;
	  left: 350px;
	  min-width: 800px;
	}
	.el-menu--horizontal > .el-menu-item{
		height: 90px;
		line-height: 90px;
		width: 84px;
	}
	.nav-login{
		position: absolute;
		left: 1150px;
		top: 13px;
	}
	.tele-icon{
		height: 35px;
		width: 30px;
		vertical-align: bottom;
	}
	.stu-login{
		width: 80px;
		background:#f9f7f8 ;
		height: 35px;
		border: solid 1px #c7c7c7;
	}
	.nav-diviline{
		position: relative;
		top: 13px;
		display: inline-block;
		height: 35px;
		margin-left: 20px;
		margin-right: 20px;
		border-left: 1px #c7c7c7 solid;
	}
</style>
